<template>
	<view class="retrieval-write-offs">
		<!-- <view class="search-wrapper flex-align">
			<view class="flex-grow-1 flex-align input">
				<van-icon name="search" size="18" color="rgb(25,25,25)" />
				<input v-model="searchValue" placeholder="手机号/卡号/订单号" class="flex-grow-1" />
			</view>
			<van-dropdown-menu>
				<van-dropdown-item title="筛选" ref="filter">
					<filter-list :filterList="filterList" @confirm="onConfirm" @reset="onReset" />
				</van-dropdown-item>
			</van-dropdown-menu>
		</view> -->

		<view class="section_1">
			<!-- <view class="user flex-align">
				<view style="margin-right: 20rpx;">
					<u-avatar  width="80rpx" height="80rpx"></u-avatar>
				</view>
				<view>
					<view class="flex-align">
						<view class="user-name">张峰</view>
						<view class="sex">男 26</view>
					</view>
					<view class="tel">15965288789</view>
				</view>
			</view> -->

			<view class="list">
				<view v-for="(item, index) in list" :key="index" class="item flex-align"  v-if="item.type == type"
					:class="{ active: active === index }" @click="write_off(item,index)">
					<!-- <view style="margin-right: 20rpx;">
						<u-avatar  width="65rpx" height="65rpx"></u-avatar>
					</view> -->
					<view class="flex-grow-1">
						<view class="flex-align">
							<view class="text_11">{{item.goods_name}}</view>
						</view>
						<view class="flex-space-between " style="margin-top: 20rpx;">
							<!-- <text class="text_12"> no.{{ item.cardno }}</text> -->
							<!-- <text class="text_13">剩余：{{ item.else_text }}</text> -->
							<text class="text_12"> no.{{ item.cardno }}</text>
							<text class="text_12"> 剩余：{{ item.else_text }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn">
			<!-- <button round block style="background-color:linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%) ;" 
				@click="onClick">去转移</button> -->
			<button style="background-color: #3E8AFE; color: #fff;border-radius: 50rpx 50rpx;margin-top: 15rpx;" type="default" @click="onClick">去转移</button>
		</view>
	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				searchValue: '',
				filterList: [{
						label: '时间范围',
						prop: 'time',
						type: 'select-btn',
						options: [{
								label: '今日',
								value: 0
							},
							{
								label: '本月',
								value: 1
							},
							{
								label: '本年',
								value: 2
							},
						]
					},
					{
						label: '所属部门',
						prop: 'dept',
						type: 'select-btn',
						options: [{
								label: '1号馆',
								value: 0
							},
							{
								label: '2号馆',
								value: 1
							},
							{
								label: '3号馆',
								value: 2
							},
							{
								label: '4号馆',
								value: 3
							},
						]
					},
					{
						label: '产品分类',
						prop: 'classify',
						type: 'select-btn',
						options: [{
								label: '课程',
								value: 0
							},
							{
								label: '门票',
								value: 1
							},
							{
								label: '会员卡',
								value: 2
							},
							{
								label: '商品',
								value: 3
							},
							{
								label: '场地',
								value: 4
							},
						]
					},
				],
				active: 0,
				list: [
				
				],
				listQuery: { //分页
					limit: 10,
					page: 1,
				},
				totalPage: "",
				type:""
			}
		},
		onLoad(options) {
			console.log(options,'12132')
			this.type = options.type
			this.getList()
		},
		methods: {
			// 获取我的卡包
			async getList() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let params = {
					project_id: getApp().globalData.projectId, // user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					expired: 0,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				}
				let res = await index.getMyCard(params)
				if (res.code === 1) {
					// this.list = res.data.cardData
					this.list = this.list.concat(res.data.cardData); //将数据拼接在一起
					that.totalPage = res.data.page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.getList()
			},
			write_off(item, index) {
				console.log(item, index, '123')
				this.active = index
			},
			onConfirm(filterData) {
				this.$refs.filter.toggle();
				console.log(filterData, '111');
			},
			onReset() {
				this.$refs.filter.toggle();
			},
			onClick() {
				uni.navigateTo({
					url: '/page_admin/mobile-write-offs/confirm-write-offs/confirm-write-offs'
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");
	@import url("@/static/css/common/common.scss");
	.retrieval-write-offs {
		min-height: 100vh;
		background-color: rgb(243, 243, 243);
		padding-bottom: 130rpx;

		.search-wrapper {
			padding: 0 30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 0px 0px 16rpx 16rpx;

			.input {
				padding: 0 28rpx;
				color: rgb(153, 153, 153);
				font-size: 26rpx;
				background-color: rgba(243, 247, 250, 0.95);
				border-radius: 33rpx;
				height: 66rpx;

				/deep/.van-icon {
					padding: 0 4rpx;
				}
			}

			/deep/.van-dropdown-menu {
				box-shadow: none;
				height: 96rpx;

				.van-dropdown-menu__title {
					color: rgb(99, 93, 247);
				}
			}
		}

		.user {
			padding: 30rpx 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);

			.user-name {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
				margin-right: 10rpx;
			}

			.sex {
				color: rgb(153, 153, 153);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 21rpx;
			}

			.tel {
				margin-top: 20rpx;
				color: rgb(51, 51, 51);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 17rpx;
			}
		}

		.section_1 {
			padding: 20rpx;
		}

		.list {
			margin-top: 20rpx;
			padding: 20rpx 10rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);
			border-radius: 10rpx;

			.item {
				padding: 26rpx 24rpx;
				border-radius: 27rpx;
				border: solid 2rpx rgb(229, 229, 229);

				&+.item {
					margin-top: 30rpx;
				}

				&.active {
					background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391246929552989118.png') left top/100% 100% no-repeat;
					// border: none;
				}

				.text_11 {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 27rpx;
					margin-right: 30rpx;
				}

				.text_12 {
					font-size: 26rpx;
					font-weight: 500;
					line-height: 24rpx;
				}

				.text_13 {
					font-weight: bold;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 00rpx;
			left: 0;
			width: 100%;
			height: 140rpx;
			background-color: #fff;
			padding: 0 40rpx;
		}
	}
</style>